<template>
    <h2 align="left" style="font-size: 16px">
        <el-icon :size="14">
            <Edit />
        </el-icon>
        待办任务
    </h2>
    <el-divider style="margin-top: 0px" />
    <el-row :gutter="20">
        <el-col :span="4">
            <el-card class="card-box">
                <!-- 标题部分 -->
                <template #header>
                    <div class="card-header card-header-todo" style="font-size: 14px">困境儿童申请认定</div>
                </template>
                <el-text>0</el-text>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card class="card-box">
                <!-- 标题部分 -->
                <template #header>
                    <div class="card-header card-header-todo" style="font-size: 14px">困境儿童申请变更</div>
                </template>
                <el-text>0</el-text>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card class="card-box">
                <!-- 标题部分 -->
                <template #header>
                    <div class="card-header card-header-todo" style="font-size: 14px">困境儿童申请注销</div>
                </template>
                <el-text>0</el-text>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card class="card-box">
                <!-- 标题部分 -->
                <template #header>
                    <div class="card-header card-header-todo" style="font-size: 14px">未保站示范管理申报</div>
                </template>
                <el-text>0</el-text>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card class="card-box">
                <!-- 标题部分 -->
                <template #header>
                    <div class="card-header card-header-todo" style="font-size: 14px">留守儿童申请注销</div>
                </template>
                <el-text>0</el-text>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card class="card-box">
                <!-- 标题部分 -->
                <template #header>
                    <div class="card-header card-header-todo" style="font-size: 14px">本月资金未确认</div>
                </template>
                <el-text>0</el-text>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card class="card-box">
                <!-- 标题部分 -->
                <template #header>
                    <div class="card-header card-header-todo" style="font-size: 14px">本月资金未确认</div>
                </template>
                <el-text>0</el-text>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card class="card-box">
                <!-- 标题部分 -->
                <template #header>
                    <div class="card-header card-header-todo" style="font-size: 14px">本月资金未确认</div>
                </template>
                <el-text>0</el-text>
            </el-card>
        </el-col>
        <el-col :span="4">
            <el-card class="card-box">
                <!-- 标题部分 -->
                <template #header>
                    <div class="card-header card-header-todo" style="font-size: 14px">本月资金未确认</div>
                </template>
                <el-text>0</el-text>
            </el-card>
        </el-col>
    </el-row>
    <h2 align="left" style="font-size: 16px">
        <el-icon :size="14">
            <Collection />
        </el-icon>
        实时数据
    </h2>
    <el-divider style="margin-top: 0px" />
    <el-row :gutter="20">
        <el-col :span="4">
            <el-card @click="isShow = !isShow">
                <!-- 标题部分 -->
                <template #header>
                    <div class="card-header card-header-child" style="font-size: 14px">登记对象</div>
                </template>

                <!-- 内容部分 -->
                <el-descriptions :column="1">
                    <el-descriptions-item label="困境儿童">7302</el-descriptions-item>
                    <el-descriptions-item label="留守儿童">731</el-descriptions-item>
                    <el-descriptions-item label="流动儿童">1672</el-descriptions-item>
                    <el-descriptions-item label="留守妇女">308</el-descriptions-item>
                </el-descriptions>
            </el-card>
        </el-col>
        <el-col :span="6">
            <el-card>
                <!-- 标题部分 -->
                <template #header>
                    <div class="card-header card-header-today" style="font-size: 14px">今日变动</div>
                </template>

                <!-- 内容部分 -->
                <el-descriptions :column="1">
                    <el-descriptions-item label="困境儿童">新增 3 减少 8</el-descriptions-item>
                    <el-descriptions-item label="留守儿童">新增 2 减少 4</el-descriptions-item>
                    <el-descriptions-item label="流动儿童">新增 1 减少 1</el-descriptions-item>
                    <el-descriptions-item label="留守妇女">新增 1 减少 2</el-descriptions-item>
                </el-descriptions>
            </el-card>
        </el-col>
        <el-col :span="10">
            <el-card>
                <!-- 标题部分 -->
                <template #header>
                    <div class="card-header card-header-branch" style="font-size: 14px">登记机构</div>
                </template>

                <!-- 内容部分 -->
                <el-descriptions :column="2">
                    <el-descriptions-item label="儿童福利机构">1</el-descriptions-item>
                    <el-descriptions-item label="设区市未保中心">1</el-descriptions-item>
                    <el-descriptions-item label="县（市、区）未保中心">66</el-descriptions-item>
                    <el-descriptions-item label="乡镇（街道）未保站">88</el-descriptions-item>
                    <el-descriptions-item label="村居妇女儿童委员会">0</el-descriptions-item>
                    <el-descriptions-item label="收养登记机关">0</el-descriptions-item>
                    <el-descriptions-item label=""></el-descriptions-item>
                </el-descriptions>
            </el-card>
        </el-col>
    </el-row>
    <el-row :gutter="0" v-show="isShow">
        <el-col :span="10">
            <div>
                <h3 align="left" style="font-size: 14px">困境儿童</h3>
                <el-row justify="space-between">
                    <el-col :span="12">
                        <div id="healthPieChart" style="height: 120px"></div>
                    </el-col>
                    <el-col :span="12">
                        <div id="agePieChart" style="height: 120px"></div>
                    </el-col>
                    <el-col :span="24">
                        <div id="areaBarChart" style="height: 220px; width: 100%"></div>
                    </el-col>
                </el-row>
            </div>
        </el-col>
        <el-col :span="10">
            <div>
                <h3 align="left" style="font-size: 14px">留守儿童</h3>
                <el-row justify="space-between">
                    <el-col :span="12">
                        <div id="healthPieChart2" style="height: 120px"></div>
                    </el-col>
                    <el-col :span="12">
                        <div id="agePieChart2" style="height: 120px"></div>
                    </el-col>
                    <el-col :span="24">
                        <div id="areaBarChart2" style="height: 220px; width: 100%"></div>
                    </el-col>
                </el-row>
            </div>
        </el-col>
    </el-row>

    <h2 align="left" style="font-size: 16px">
        <el-icon :size="14">
            <UserFilled />
        </el-icon>
        困境儿童 7302 人 留守儿童 731 人 流动儿童 1672 人
    </h2>
    <el-divider style="margin-top: 0px" />

    <el-row>
        <el-col :span="4">
            <div>
                <h3 align="left" style="font-size: 14px">孤儿 222 人</h3>
                <!-- 内容部分 -->
                <el-descriptions :column="1">
                    <el-descriptions-item label="集中供养">39 人</el-descriptions-item>
                    <el-descriptions-item label="社会散居">183 人</el-descriptions-item>
                </el-descriptions>
            </div>
        </el-col>
        <el-col :span="4">
            <div>
                <h3 align="left" style="font-size: 14px">事实无人抚养儿童 854 人</h3>
                <!-- 内容部分 -->
                <el-descriptions :column="1">
                    <el-descriptions-item label="集中供养">39 人</el-descriptions-item>
                    <el-descriptions-item label="社会散居">183 人</el-descriptions-item>
                </el-descriptions>
            </div>
        </el-col>
        <el-col :span="4">
            <div>
                <h3 align="left" style="font-size: 14px">重病重残 2919 人</h3>
                <!-- 内容部分 -->
                <el-descriptions :column="1">
                    <el-descriptions-item label="重病">466 人</el-descriptions-item>
                    <el-descriptions-item label="重残">2453 人</el-descriptions-item>
                </el-descriptions>
            </div>
        </el-col>
        <el-col :span="8">
            <div>
                <h3 align="left" style="font-size: 14px">贫困家庭儿童 3205 人</h3>
                <!-- 内容部分 -->
                <el-descriptions :column="3">
                    <el-descriptions-item label="低保">2407 人</el-descriptions-item>
                    <el-descriptions-item label="特困">0 人</el-descriptions-item>
                    <el-descriptions-item label="低保边缘">781 人</el-descriptions-item>
                    <el-descriptions-item label="原建档立卡">0 人</el-descriptions-item>
                    <el-descriptions-item label="支出型贫困">17 人</el-descriptions-item>
                </el-descriptions>
            </div>
        </el-col>
    </el-row>
</template>

<script lang="ts" setup>
    // 引入 ECharts 核心模块
    import * as echarts from 'echarts/core';
    // 引入图表组件（按实际需要）
    import { BarChart, PieChart } from 'echarts/charts';
    // 引入基础组件（基本上都需要）
    import {
        TooltipComponent,
        LegendComponent,
        TitleComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
    } from 'echarts/components';
    // 引入功能组件（按实际需要）
    import { LabelLayout, UniversalTransition } from 'echarts/features';
    // 引入渲染器（必须）
    import { CanvasRenderer } from 'echarts/renderers';
    import { ref, onMounted } from 'vue';
    import { Edit, Collection, UserFilled } from '@element-plus/icons-vue';

    const isShow = ref(true);

    // 注册 echarts 需要的组件
    echarts.use([
        BarChart,
        PieChart,
        TooltipComponent,
        LegendComponent,
        TitleComponent,
        GridComponent,
        DatasetComponent,
        TransformComponent,
        LabelLayout,
        UniversalTransition,
        CanvasRenderer,
    ]);

    // 登记对象
    const tableData = ref([
        { name: '困境儿童', value: 5030 },
        { name: '留守儿童', value: 700 },
        { name: '流动儿童', value: 300 },
        { name: '留守妇女', value: 400 },
    ]);

    // 地区分布
    const tableAreaData = ref([
        { name: '海陵区', value: 300 },
        { name: '高港区', value: 400 },
        { name: '姜堰区', value: 600 },
        { name: '兴化市', value: 2000 },
        { name: '靖江市', value: 300 },
        { name: '泰兴市', value: 1500 },
        { name: '医药高新区', value: 300 },
    ]);

    // 健康状况
    const tableHealthData = ref([
        { name: '健康', value: 4251 },
        { name: '残疾', value: 2524 },
        { name: '患病', value: 488 },
    ]);
    // 年龄分布
    const tableAgeData = ref([
        { name: '0-5岁', value: 417 },
        { name: '6-13岁', value: 3129 },
        { name: '14-16岁', value: 1809 },
        { name: '17-18岁', value: 1125 },
    ]);

    // 登记机构
    const tableBranchData = ref([
        { name: '儿童福利机构', value: 1 },
        { name: '设区市未保中心', value: 1 },
        { name: '县（市、区）未保中心', value: 66 },
        { name: '乡镇（街道）未保站', value: 88 },
        { name: '村居妇女儿童委员会', value: 0 },
        { name: '收养登记机关', value: 0 },
    ]);

    // currentTab和tabsArr有需要的情况下，比如打开新路由页面，然后保存需要关闭当前页面并且把tabs切换了
    const currentTab = defineModel<any>('currentTab', {
        required: false,
        default: {},
    });
    const tabsArr = defineModel<any>('tabsArr', {
        required: false,
        default: {},
    });

    onMounted(() => {
        // 健康状况
        const healthPieChart = echarts.init(document.getElementById('healthPieChart'));
        healthPieChart.setOption({
            legend: {
                show: true,
                orient: 'vertical',
                left: 'right',
            },
            series: [
                {
                    type: 'pie',
                    data: tableHealthData.value.map((item) => ({
                        name: item.name,
                        value: item.value,
                    })),
                    radius: ['30%', '70%'],
                    label: {
                        show: false,
                    },
                },
            ],
            tooltip: {
                trigger: 'item', // 针对单个图表项
                formatter: '{b}: {c} ({d}%)', // 自定义显示格式
            },
        });

        // 年龄分布
        const agePieChart = echarts.init(document.getElementById('agePieChart'));
        agePieChart.setOption({
            legend: {
                show: true,
                orient: 'vertical',
                left: 'right',
            },
            series: [
                {
                    type: 'pie',
                    data: tableAgeData.value.map((item) => ({
                        name: item.name,
                        value: item.value,
                    })),
                    radius: ['30%', '70%'],
                    label: {
                        show: false,
                    },
                },
            ],
            tooltip: {
                trigger: 'item', // 针对单个图表项
                formatter: '{b}: {c} ({d}%)', // 自定义显示格式
            },
        });

        // 地区分布
        const areaBarChart = echarts.init(document.getElementById('areaBarChart'));
        areaBarChart.setOption({
            grid: {
                top: '5%', // 调整顶部边距
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true, // 确保刻度标签不会被裁剪
            },
            xAxis: {
                type: 'category',
                data: tableAreaData.value.map((item) => item.name),
                axisLabel: {
                    rotate: 45, // 倾斜45度
                    interval: 0, // 强制显示所有标签
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    interval: 0, // 强制显示所有标签
                },
            },
            series: [
                {
                    data: tableAreaData.value.map((item) => item.value),
                    type: 'bar',
                    barWidth: '20%',
                },
            ],
        });

        // 健康状况
        const healthPieChart2 = echarts.init(document.getElementById('healthPieChart2'));
        healthPieChart2.setOption({
            legend: {
                show: true,
                orient: 'vertical',
                left: 'right',
            },
            series: [
                {
                    type: 'pie',
                    data: tableHealthData.value.map((item) => ({
                        name: item.name,
                        value: item.value,
                    })),
                    radius: ['30%', '70%'],
                    label: {
                        show: false,
                    },
                },
            ],
            tooltip: {
                trigger: 'item', // 针对单个图表项
                formatter: '{b}: {c} ({d}%)', // 自定义显示格式
            },
        });

        // 年龄分布
        const agePieChart2 = echarts.init(document.getElementById('agePieChart2'));
        agePieChart2.setOption({
            legend: {
                show: true,
                orient: 'vertical',
                left: 'right',
            },
            series: [
                {
                    type: 'pie',
                    data: tableAgeData.value.map((item) => ({
                        name: item.name,
                        value: item.value,
                    })),
                    radius: ['30%', '70%'],
                    label: {
                        show: false,
                    },
                },
            ],
            tooltip: {
                trigger: 'item', // 针对单个图表项
                formatter: '{b}: {c} ({d}%)', // 自定义显示格式
            },
        });

        // 地区分布
        const areaBarChart2 = echarts.init(document.getElementById('areaBarChart2'));
        areaBarChart2.setOption({
            grid: {
                top: '5%', // 调整顶部边距
                left: '5%',
                right: '5%',
                bottom: '5%',
                containLabel: true, // 确保刻度标签不会被裁剪
            },
            xAxis: {
                type: 'category',
                data: tableAreaData.value.map((item) => item.name),
                axisLabel: {
                    rotate: 45, // 倾斜45度
                    interval: 0, // 强制显示所有标签
                },
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    interval: 0, // 强制显示所有标签
                },
            },
            series: [
                {
                    data: tableAreaData.value.map((item) => item.value),
                    type: 'bar',
                    barWidth: '20%',
                },
            ],
        });
    });
</script>

<style lang="scss" scoped>
    .card-box {
        margin: 5px;
    }
    /* 父级通用样式 */
    .card-header {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        padding: 15px;
        margin: calc(-1 * var(--el-card-padding));
        border-radius: 10px 10px 0 0; /* 匹配卡片的圆角 */
    }

    /* 子级不同样式 */
    .card-header-todo {
        background-color: #909399;
    }
    .card-header-child {
        background-color: #e6a23c;
    }
    .card-header-today {
        background-color: #f56c6c;
    }
    .card-header-branch {
        background-color: #409eff;
    }
</style>
